<template>
  <view class="viewport">
    <fui-nav-bar background="#0052D9" title="备案" color="#fff"></fui-nav-bar>
    <view class="warp">
      <view class="port">
        <view class="prot_A">
          <view class="left">
            <view class="">5</view>
            <view class="">库存不足</view>
          </view>
          <view class="left">
            <view class="">500</view>
            <view class="">存量过量</view>
          </view>
        </view>
        <view class="footer">
          <fui-list>
            <fui-list-cell arrow>
              <view class="fui-align__center" @click="clickItem(1)">
                <image class="fui-list__icon" src="/static/images/institution/userName.png" mode="widthFix"></image>
                <text>备件档案</text>
              </view>
            </fui-list-cell>
            <fui-list-cell arrow>
              <view class="fui-align__center" @click="clickItem(2)">
                <image class="fui-list__icon" src="/static/images/institution/userName.png" mode="widthFix"></image>
                <text>备件领用</text>
              </view>
            </fui-list-cell>
            <fui-list-cell arrow>
              <view class="fui-align__center" @click="clickItem(3)">
                <image class="fui-list__icon" src="/static/images/institution/userName.png" mode="widthFix"></image>
                <text>备件出库</text>
              </view>
            </fui-list-cell>
            <fui-list-cell arrow>
              <view class="fui-align__center" @click="clickItem(4)">
                <image class="fui-list__icon" src="/static/images/institution/userName.png" mode="widthFix"></image>
                <text>备件入库</text>
              </view>
            </fui-list-cell>
          </fui-list>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
const clickItem = (e) => {
	if(e==1){
		uni.navigateTo({
		  url: '/subpkg_sparePart/archives/archives'
		});
	}else if(e==2){
		uni.navigateTo({
		  url: '/subpkg_sparePart/index/index'
		});
	}else if(e==3){
		uni.navigateTo({
		  url: '/subpkg_sparePart/Outbound/Outbound'
		});
	}else{
		uni.navigateTo({
		  url: '/subpkg_sparePart/Warehousing/Warehousing'
		});
	}
  
};
</script>

<style lang="scss" scoped>
page {
  height: 100vh;
  background-color: pink;
}
.viewport {
}
.warp {
  height: 100%;
  background-color: #f6f6f6;
  font-family: Arial, Helvetica, sans-serif;
  padding-bottom: 150rpx;

  .port {
    padding: 18rpx;
    .prot_A {
      color: #999999;
      display: flex;
      justify-content: space-between;
      .left {
        border-radius: 8rpx;
        width: 48%;
        height: 160rpx;
        background-color: #e2eaf2;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        padding: 40rpx 0;
      }
    }
  }
  .footer {
    margin-top: 24rpx;
    .fui-align__center {
      flex: 1;
      display: flex;
      align-items: center;
    }
    .fui-text__explain {
      color: #ccc;
    }

    .fui-list__icon {
      width: 48rpx;
      height: 48rpx;
      margin-right: 24rpx;
    }
  }
}
</style>
